import React from 'react'
import { Form, Input, Button, DatePicker, Select } from 'antd'
import { disabledStartDate, disabledEndDate } from '../batchRecord/Search'

const { Item } = Form

const { Option } = Select

const Search = (props) => {

  const inputStyles = { style: { width: 120 } }

  const { 
    orderNum,
    type,
    rechargeTypeEnum,
    startTime,
    endTime,
    onChangeOrderNum,
    onChangeType,
    onChangeStartTime,
    onChangeEndTime,
    onSearch,
   } = props

  return (
    <Form layout="inline" style={{padding: 24}}>
      <Item label="充值单号" >
        <Input  {...inputStyles} value={orderNum} onChange={onChangeOrderNum} placeholder="请输入充值单号" />
      </Item>
      <Item label="类型" >
        <Select {...inputStyles} value={type} onChange={onChangeType}>
          <Option key="all" value={null}>全部</Option>
          {rechargeTypeEnum.map(({ index, desc }) => <Option key={index} value={index}>{desc}</Option>)}
        </Select>
      </Item>
      <Item label="开始时间">
        <DatePicker  
          {...inputStyles}
          defaultValue={startTime}
          disabledDate={disabledStartDate.bind(null, endTime)} 
          onChange={onChangeStartTime} 
        />
      </Item> 
      <Item label="结束时间">
        <DatePicker  
          {...inputStyles} 
          defaultValue={endTime}
          disabledDate={disabledEndDate.bind(null, startTime)} 
          onChange={onChangeEndTime} 
        />
      </Item>
      <Item>
        <Button type="primary" onClick={onSearch}>查询</Button>
      </Item>
    </Form>
  ) 
}

export default Search